import { useNavigate, useLocation } from 'react-router-dom'
import { MoreOutline } from 'antd-mobile-icons'
import Nabar from '../../conpoment/Nabar'
import styles from './index.module.css'
import { Button } from 'antd-mobile'

function PaymentSuccess() {
  const navigate = useNavigate()
  const location = useLocation()
  
  // 从路由参数或location.state获取支付信息
  const paymentData = location.state || {
    amount: 20.00,
    paymentMethod: '支付宝',
    accountBalance: 158.50,
    orderId: `ORDER_${Date.now()}`,
    doctorName: '刘医生',
    department: '门诊外一科',
    appointmentDate: '2020-01-27',
    appointmentTime: '08:30-12:00'
  }

  const handleComplete = () => {
    // 跳转到挂号详情页面
    navigate('/registration_detail', {
      state: {
        patientName: '王小柯',
        registrationNumber: `2015${Math.random().toString().substr(2, 6)}10`,
        doctorName: paymentData.doctorName || '刘医生',
        doctorTitle: '主任医师',
        doctorAvatar: 'https://ts1.tc.mm.bing.net/th/id/OIP-C.WJlM1ncsKLaS1d99La0ErwHaHa?w=176&h=211&c=8&rs=1&qlt=90&o=6&cb=12&dpr=1.2&pid=3.1&rm=2',
        hospital: '四川省保健院南苑',
        department: paymentData.department || '门诊外一科',
        registrationFee: paymentData.amount,
        appointmentDate: paymentData.appointmentDate || '2020-01-27',
        appointmentTime: paymentData.appointmentTime || '08:30-12:00',
        timeSlot: '上午',
        departmentAddress: '门诊一部五层C区203诊室',
        paymentMethod: paymentData.paymentMethod,
        orderId: paymentData.orderId
      }
    })
  }

  return (
    <div className={styles.page}>
      <Nabar title='' sticky={false} />
      
      <div className={styles.content}>
        {/* 支付成功状态 */}
        <div className={styles.successCard}>
          <div className={styles.alipayIcon}>
            <div className={styles.alipayLogo}>支</div>
          </div>
          <div className={styles.successText}>支付成功</div>
          <div className={styles.amount}>¥ {paymentData.amount.toFixed(2)}</div>
        </div>

        {/* 支付详情 */}
        <div className={styles.detailCard}>
          <div className={styles.detailItem}>
            <span className={styles.label}>付款方式</span>
            <span className={styles.value}>{paymentData.paymentMethod}</span>
          </div>
          <div className={styles.detailItem}>
            <span className={styles.label}>账户余额</span>
            <span className={styles.value}>¥ {paymentData.accountBalance.toFixed(2)}</span>
          </div>
        </div>

        {/* 预约信息 */}
        <div className={styles.appointmentCard}>
          <div className={styles.appointmentTitle}>预约信息</div>
          <div className={styles.appointmentItem}>
            <span className={styles.label}>医生</span>
            <span className={styles.value}>{paymentData.doctorName}</span>
          </div>
          <div className={styles.appointmentItem}>
            <span className={styles.label}>科室</span>
            <span className={styles.value}>{paymentData.department}</span>
          </div>
          <div className={styles.appointmentItem}>
            <span className={styles.label}>时间</span>
            <span className={styles.value}>
              {paymentData.appointmentDate} {paymentData.appointmentTime}
            </span>
          </div>
        </div>
      </div>

      {/* 底部完成按钮 */}
      <div className={styles.bottomButton}>
        <Button 
          block 
          size='large'
          onClick={handleComplete}
          className={styles.completeBtn}
        >
          完成
        </Button>
      </div>
    </div>
  )
}

export default PaymentSuccess
